<template>
  <div class="news-section">
    <div class="category-label" :style="{ backgroundColor: computedCategoryColor }">
      {{ category }}
    </div>
    <div class="news-content">
      <div 
        v-for="(item, index) in news" 
        :key="index" 
        class="news-item"
      >
        <div class="news-title">{{ item.title }}</div>
        <div class="news-summary">{{ item.summary }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  category: {
    type: String,
    required: true
  },
  news: {
    type: Array,
    required: true
  },
  categoryColor: {
    type: String,
    default: '#000'
  }
})

// 根据分类自动设置颜色
const computedCategoryColor = computed(() => {
  const colorMap = {
    '国内新闻': '#283645',
    '国际新闻': '#000', 
    '娱乐新闻': '#ff0000',
    '体育新闻': '#00aa00',
    '科技新闻': '#0066cc',
    '财经新闻': '#ff6600'
  }
  return colorMap[props.category] || '#000'
})
</script>

<style scoped>
.news-section {
  display: flex;
  background-color: white;
  margin-bottom: 15px;
  border: none;
  height: 150px;
}

.category-label {
  width: 120px;
  height: 120px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  padding: 10px;
  text-align: center;
  margin: 15px;
}

.news-content {
  flex: 1;
  padding: 15px 20px;
  background-color: white;
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.news-item {
  padding: 8px 0;
  border-bottom: 1px solid #e0e0e0;
}

.news-item:last-child {
  border-bottom: none;
}

.news-title {
  font-weight: bold;
  margin-bottom: 4px;
  color: #000;
  font-size: 16px;
}

.news-summary {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}
</style>
